<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-30">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
          <div class="flex items-center space-x-2">
            <i class="fa fa-play-circle text-primary text-xl"></i>
            <h1 class="text-xl font-bold text-gray-800">YT工单派单管理系统</h1>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <nav class="hidden md:flex space-x-4">
            <router-link to="/" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100">首页</router-link>
            <router-link to="/about" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100">关于我们</router-link>
          </nav>
          <div class="flex items-center space-x-2">
            <router-link to="/login" class="px-3 py-2 rounded-md text-sm font-medium bg-green-600 text-white hover:bg-green-700">登录</router-link>
            <router-link to="/client/login" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100">客户入口</router-link>
            <router-link to="/staff/login" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100">员工入口</router-link>
            <router-link to="/admin/login" class="px-3 py-2 rounded-md text-sm font-medium bg-primary text-white hover:bg-primary-dark">管理员入口</router-link>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 overflow-y-auto bg-gray-50">
      <router-view />
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200">
      <div class="container mx-auto px-4 py-6">
        <div class="text-center text-sm text-gray-500">
          <p>© 2025 YT工单派单管理系统. 保留所有权利. 侵权必究！</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
</script>

<style scoped>
.router-link-exact-active {
  @apply bg-primary text-white;
}
</style>